<template>
	<view class="hpv-img">
		<image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" mode="aspectFill"></image>
	</view>
	<!-- 筛选导航 -->
	<view class="tab-view"> 
		<view class="tab-toggle" v-for="(item, index) in hpvNav" :key="index" @click="selectData(index,item._id)">
			<text>{{ item.name }}</text>
			<text :class="index == activeIndex ? 'checked' : ''"></text>
		</view>
	</view>
	<!-- 疫苗列表 -->
	<view class="hpv-list" v-for="(item,index) in hpvList" :key="item._id" @click="goDesc(index)">
		<view>
			<view class="hpv-type">{{ item.name }}</view>
			<view class="hpv-age">
				<text v-for="(m,i) in item.describe" :key="i">{{m}}</text>
			</view>
			<view class="hpv-price">￥{{item.price[0]}}-￥{{ item.price[1] }}</view>
		</view>
		<view class="hpv-reserve">去预约</view>
	</view>

	<!-- 高度 -->
	<view style="height:300rpx"></view>
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onMounted, reactive, toRefs } from 'vue'
import {reqOtuhpv} from '@/serve/api'
import { hpvDataType,hpvNavType } from '@/types';

//定义页面响应式数据
let pageData=reactive({
	hpvData:[]as hpvDataType[],
	hpvList:[]as hpvDataType[],
	hpvNav:[]as hpvNavType[],
	activeIndex:0
})

//批量解构导出响应式数据
let {hpvData,hpvList,hpvNav,activeIndex}=toRefs(pageData)

//获取页面列表数据
onMounted(async()=>{
	let {data} =await reqOtuhpv()
	pageData.hpvData=data[0].hpv_list
	pageData.hpvNav=data[0].hpv_select
	pageData.hpvList=data[0].hpv_list
})

//实现hpv筛选
function selectData(index:number,id:string){
pageData.activeIndex=index
let list=pageData.hpvData.filter(item=>item.hpv_id==id)
pageData.hpvList=list.length>0?list:pageData.hpvData
}

// 6.跳转到hpv疫苗详情应用页面
function goDesc(index: number) {
	uni.navigateTo({ url: "./hpvDesc?value=" + JSON.stringify(pageData.hpvList[index]) })
}

</script>
  
  
<style>
page {
	background-color: #fafafa;
}

.hpv-img {
	height: 350rpx;
}

.hpv-img image {
	height: 350rpx;
	width: 100%;
	display: block;
}

/* tab切换 */
.tab-view {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #ffffff;
}

.tab-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100rpx;
	justify-content: center;
	position: relative;
}

.checked {
	width: 50rpx;
	height: 8rpx;
	background-color: #0d7cff;
	position: absolute;
	bottom: 0;
}

/* 疫苗列表 */
.hpv-list {
	background-color: #ffffff;
	margin: 20rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	border-radius: 20rpx;
}

.hpv-type {
	font-size: 35rpx;
}

.hpv-age {
	display: flex;
	align-items: center;
}

.hpv-age text {
	background-color: #f4f6fa;
	padding: 7rpx;
	font-size: 25rpx;
	margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
	font-weight: bold;
	color: #ff5f2c;
}

.hpv-reserve {
	align-self: flex-end;
	background-color: #0d7cff;
	padding: 15rpx 30rpx;
	border-radius: 40rpx;
	color: #ffffff;
}
</style>